<template>
<div class="about">
  <h2>count: {{count}}</h2>
  <h2>count2: {{count2}}</h2>
  <!-- 内部会自动将h2标签对象添加到h2Ref对象的value属性上 -->
  <h2 ref="h2Ref">count3: {{count3}}</h2>

  <button @click="increment">增加</button>
  <button @click="count3++">更新count3</button>
  <button @click="readContent">读取h2的内容</button>
</div>
</template>

<script lang="ts">
import {
  ref,
  computed
} from 'vue'
export default {
  name: 'About',



  setup () {

    // 创建包含响应式数据ref对象
    const count = ref(1)
    console.log(count)

    // 定义只有getter计算属性
    const count2 = computed(() => {
      console.log('count2 getter')
      return count.value *2
    })
    console.log(count2)

    // 定义带getter和setter的计算属性
    const count3 = computed<number>({
      get () {
        console.log('count3 getter')
        return count.value *3
      },
      set (value) {
        console.log('count3变化了', value)
        count.value = value / 3
      }
    })

    function increment () {
      // 在js中更新ref数据得到更新value属性值
      count.value += 1
    }

    // 利用ref得到组件内的标签对象或子组件对象, 代替: this.$refs.xxx
    const h2Ref = ref<HTMLElement>()
    const readContent = () => {
      alert(h2Ref.value && h2Ref.value.innerHTML)
    }

    return { // 返回对象中的所有属性, 模板可以直接读取显示
      count,
      increment,
      count2,
      count3,

      h2Ref,
      readContent
    }
  }
}
</script>
